<template>
  <view>
    <!-- 头部 -->
    <Header></Header>
    <!-- 轮播图 -->
    <swiper class="swiper" indicator-dots indicator-active-color="#fff" autoplay interval="2000" circular>
      <swiper-item class="swiper_item" v-for="item in bannerData" :key="item.bannerId">
        <image :src="item.pic" mode="widthFix"></image>
      </swiper-item>
    </swiper>
    <!-- 功能栏 -->
    <control-strip></control-strip>
    <!-- 推荐歌单 -->
    <Card :result="relatedSongData" :title="'推荐歌单'"></Card>
    <!-- 音乐播放器 -->
    <Music class="music"></Music>
  </view>
</template>

<script setup>
  import Card from '@/common/components/Card/Card.vue'
  import Header from './components/header/header.vue'
  import ControlStrip from './components/ControlStrop/ControlStrip.vue'
  import Music from '@/common/components/Music/Music.vue'
  import {
    ref
  } from 'vue'
  import {
    onLoad,
    onPullDownRefresh
  } from '@dcloudio/uni-app'
  import {
    getBannerDataAPI,
    getRelatedSongAPI
  } from '@/common/api/discoverAPI.js'

  // 获取轮播图数据
  const bannerData = ref([])
  const getBannerData = async () => {
    const res = await getBannerDataAPI(1)
    if (res.code !== 200) return uni.showToast({
      title: '获取轮播图数据失败！',
      duration: 2000,
      icon: 'error'
    })
    bannerData.value = res.banners
  }

  // 获取推荐歌单数据
  const relatedSongData = ref([])
  const getRelatedSong = async () => {
    const res = await getRelatedSongAPI(6)
    if (res.code !== 200) return uni.showToast({
      title: '获取推荐歌单失败！',
      duration: 2000,
      icon: 'error'
    })
    console.log(res.result);
    relatedSongData.value = res.result
  }

  // 页面加载时
  onLoad(() => {
    getBannerData()
    getRelatedSong()
  })
  // 下拉刷新时
  onPullDownRefresh(async () => {
    await getBannerData()
    await getRelatedSong()
    // 关闭下拉刷新
    uni.stopPullDownRefresh()
  })
</script>

<style lang="scss" scoped>
  .swiper {
    height: 260rpx;
    width: 100%;
    margin: 20rpx 0;

    .swiper_item {
      display: flex;
      justify-content: center;

      image {
        border-radius: 0 0 20rpx 20rpx;
      }
    }
  }

  .music {
    margin-bottom: 100rpx;
  }
</style>